<template>
   <el-collapse v-model="activeNames">
      <el-collapse-item 
        v-for="(value, key) in groupByModules" 
        :key="key" 
        :title="key as string"
        :name="key"
        >
        <library-item v-for="material in value" :key="material.package" :material="material"/>
      </el-collapse-item>
    </el-collapse>
</template>

<script lang="ts" setup>
import { groupBy } from 'lodash-es';
import { materialModules, fetchImage } from '@/materials';
import { ref } from 'vue';
import LibraryItem from "./components/library-item/index.vue";

//console.log(materialModules);
const modules = Object.values(materialModules);

const groupByModules = groupBy(modules, 'categoryName');

//console.log(groupByModules);
const activeNames = ref(Object.keys(groupByModules));

defineOptions({
    name: "Library"
})
</script>

<style scoped lang="scss">
.el-collapse {
    border-top: none;
}

 :deep() {
   .el-collapse-item__header {
     border-bottom: 1px solid #edeff3;
     padding-left: 10px;
   }

   .el-collapse-item__content {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 0;
   }
 }


</style>